<template>
    <view class="page">
        <!-- 搜索 -->
        <view class="article-search">
            <!-- <view class="icon">
				<text class="iconfont icon-saoyisao"></text>
			</view> -->
            <view class="search">
                <view class="iconfont icon-fadajing"></view>
                <input type="text" placeholder="输入搜索内容" />
            </view>
            <!-- <view class="icon">
				<text class="iconfont icon-xiaoxi"></text>
			</view> -->
        </view>
        <!-- 文章数据 -->
        
            <view class="article-data">
                <view class="article-list">
                    <view class="list" v-for="(item,index) in 8" @click="onArticle" :key="index">
                        <view class="item">
                            <view class="title">
                                <text class="two-omit">贴身内衣裤挑选指南，专业知识在这里</text>
                            </view>
                            <view class="find-collect">
                                <view class="find">
                                    <text class="iconfont icon-chankan"></text>
                                    <text>26.8万人</text>
                                </view>
                                <view class="find">
                                    <text class="iconfont icon-shoucang"></text>
                                    <text>7000人</text>
                                </view>
                            </view>
                        </view>
                        <view class="thumb">
                            <image :src="'/static/img/goods_thumb_0'+(index+1)+'.png'"></image>
                        </view>
                    </view>
                </view>
            </view>
      
    </view>
</template>

<script>
// 引入mescroll-mixins.js

export default {
   
    components: {
        
    },
    data() {
        return {
            mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
            // 下拉刷新的配置(可选, 绝大部分情况无需配置)
            downOption: {},
            // 上拉加载的配置(可选, 绝大部分情况无需配置)
            upOption: {
            },
        };
    },
    onReady() {
    },
    methods: {
        /*下拉刷新的回调, 有三种处理方式:*/
        downCallback() {
            this.mescroll.endSuccess();
        },
        /*上拉加载的回调*/
        upCallback(page) {
            setTimeout(() => {
                this.mescroll.endByPage(10, 20);
            }, 2000)
        },
        /**
         * 文章点击
         */
        onArticle() {
            uni.navigateTo({
                url: '/pagesA/index/articleDetails',
            })
        }
    }
}
</script>

<style scoped lang="scss">
.page {
  //position: absolute;
  //width: 100%;
  //height: 100%;
  //overflow-x: hidden;
  //overflow-y: auto;
  padding-bottom: 100rpx;
  background-color: #f6f6f6;
}
/* 文章搜索 */
.article-search {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100rpx;
  /* #ifdef APP-PLUS */
  height: calc(120rpx + var(--status-bar-height));
  /* #endif */
  padding: 0 4%;
  background-color: #ffffff;
  border-radius: 0 0 20rpx 20rpx;
  .icon {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 10%;
    height: 100%;
    text {
      color: #333333;
      font-size: 52rpx;
    }
  }
  .search {
    display: flex;
    align-items: center;
    padding: 0 3%;
    width: 90%;
    height: 60rpx;
    background-color: #f6f6f6;
    border-radius: 60rpx;
    /* #ifdef APP-PLUS */
    margin-top: var(--status-bar-height);
    /* #endif */
    .iconfont {
      font-size: 28rpx;
      color: #c0c0c0;
    }
    input {
      width: 90%;
      height: 100%;
      color: #212121;
      font-size: 24rpx;
      margin-left: 10rpx;
    }
  }
}
/* 文章数据  */
.article-data {
  width: 100%;
  margin-top: 120rpx;
  /* #ifdef APP-PLUS */
  margin-top: calc(150rpx + var(--status-bar-height));
  /* #endif */
  .article-list {
    padding: 0 4%;
    margin: 20rpx auto;
    .list {
      display: flex;
      align-items: center;
      width: 100%;
      height: 300rpx;
      background-color: #ffffff;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      .item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 70%;
        height: 100%;
        padding: 0 4%;
        .title {
          display: flex;
          padding: 20rpx;
          text {
            color: #212121;
            font-size: 28rpx;
          }
        }
        .find-collect {
          display: flex;
          align-items: center;
          padding: 0 20rpx;
          height: 80rpx;
          .find {
            display: flex;
            align-items: center;
            margin-right: 20rpx;
            .iconfont {
              font-size: 34rpx;
              margin-right: 10rpx;
            }
            text {
              color: #c0c0c0;
              font-size: 28rpx;
            }
          }
        }
      }
      .thumb {
        padding: 20rpx;
        image {
          width: 200rpx;
          height: 200rpx;
        }
      }
    }
  }
}
</style>
